<template>
  <div class="star-main">
    <div class="star-main-head">
      <p>发卡</p>
    </div>
    <el-form
      :label-position="labelPosition"
      :model="formLabelAlign"
      :rules="rules"
      class="star-main-form"
    >
      <el-form-item label="序列号：" prop="serial_num">
        <el-input
          v-model="formLabelAlign.serial_num"
          class="star-main-form-input"
        ></el-input>
      </el-form-item>
      
    </el-form>
    <div class="star-main-footer">
      <el-button type="primary" @click="onSubmit" style="margin-left:100px;">提交</el-button>
    </div>
  </div>
</template>

<script>
import { reactive ,ref} from "vue";
import request from "@/http/request";
import { ElNotification, ElMessage } from "element-plus";
export default {
  setup(props) {
     const labelPosition = ref("right");
     const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    const formLabelAlign = reactive({
      init_num:null,
      user_id:userInfo.user_id
    });
    const onSubmit = async () => {
      console.log(formLabelAlign);
      // 发送请求
      formLabelAlign.serial_num = Number(formLabelAlign.serial_num)
      const { data } = await request.send(formLabelAlign);
      console.log(data);
      if (data.code === 0) {
        ElNotification({
          title: "消息提示",
          message: "请求成功",
          position: "bottom-right",
        });
      } else {
        ElMessage.error(data.message);
      }
    };
    // 表格校验
    const rules = reactive({
      serial_num: [
        {
          required: true,
          message: "请输入中心序列号",
          trigger: "blur",
        },
        {
          min: 8,
          max: 32,
          message: "长度在8-32位之间",
        },
      ],
    });
    return {
      formLabelAlign,
      rules,
      onSubmit,
      labelPosition
    };
  },
};
</script>

<style scoped lang='scss'>
.ip-input {
  width: 21%;
  outline: none;
}
.ip-input-div {
  border: 1px solid black;
  margin: 7px;
}
.star-main {
  border: 1px solid #dddddd;
  width: 100%;
  width: 600px;
  margin: 30px;
  border-radius: 10px;
  .star-main-head {
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    border-radius: 10px 10px 0 0;
    p {
      line-height: 60px;
      text-align: left;
      margin-left: 20px;
    }
  }
  .star-main-form {
    margin-left: 30px;
  }
  .star-main-form-input {
    width: 70%;
  }
  .star-main-footer {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
    margin-top: 30px;
    border-radius: 0px 0px 10px 10px;
    button {
      background-color: #428bca;
    }
  }
}
</style>